<template>
	<div class="cmp-crumb" :style="{background: color}">
		<div class="breadcrumb">
			<i class="breadcrumb-icon"></i>
			<el-breadcrumb separator="/">
				<el-breadcrumb-item v-for="item in list" :to="{ path: item.url }">{{item.title}}</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
	</div>

</template>

<script>
	export default {
		props: {
			list: [],
			color: {
				type: String,
				default: '#fff'
			}
		},
		data() {
			return {

			}
		}
	}
</script>

<style lang="less" scoped>
	@contWidth: 1280px;

	.cmp-crumb {
		width: 100%;
		overflow: hidden;
		.breadcrumb {
			width: @contWidth;
			margin: 0 auto;
			height: 42px;
			display: flex;
			align-items: center;
		}

		.breadcrumb-icon {
			width: 20px;
			height: 20px;
			margin-right: 8px;
			background: url(../assets/img/crumb_icon.png);
			background-size: 100% 100%;
		}

		::v-deep .is-link {
			font-size: 14px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #333333;
		}
	}
</style>